<template>
  <div class="forgetIndex">
    <van-nav-bar
      title="忘记密码"
      left-arrow
      @click-left="handleGoBack()"
    />
    <div class="center">
      <van-cell-group>
        <van-field
          label="手机号"
          placeholder="请输入手机号"
          @input="handleChangePhone()"
          v-model="phoneNum"
          input-align="right"
          use-button-slot
          class="phoneInp"
        >
            <van-button type="info" plain slot="button" size="small" :disabled="!canGetCode"
            @click="getCode()">{{ labelForCode }}</van-button>
        </van-field>
        <van-field
          label="验证码"
          placeholder="请输入验证码"
          input-align="right"
          @input="handleCodeInput()"
          v-model="identifyingCode"
        >
        </van-field>
        <van-field
          label="新密码"
          type="password"
          placeholder="请输入新密码"
          input-align="right"
          @input="handlePasswordInput()"
          v-model="password"
        >
        </van-field>
        <van-field
          label="确认新密码"
          type="password"
          placeholder="请再次输入新密码"
          input-align="right"
          @input="handleConfirmPasswordInput()"
          v-model="confirmPassword"
        >
        </van-field>
      </van-cell-group>
    </div>
    <div class="btn">
      <van-button type="info" :disabled="!canRegister" @click="handleRegister()">提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forgetIndex',
  data () {
    return {
      phoneNum: '',
      identifyingCode: '',
      password: '',
      confirmPassword: '',
      labelForCode: '获取验证码',
      canGetCodeFlg: true,
      getCodeCount: 60,
      getCodeIntervalId: null,
      hasGetCode: false
    }
  },
  methods: {
    // 手机号输入时校验
    handleChangePhone () {
      this.phoneNum = this.phoneNum.replace(/\D/g, '').slice(0, 11)
    },
    // 验证码输入时校验
    handleCodeInput () {
      this.identifyingCode = this.identifyingCode.replace(/\D/g, '').slice(0, 6)
    },
    // 密码输入时校验
    handlePasswordInput () {
      this.password = this.password.slice(0, 6)
    },
    // 输入确认密码时候校验
    handleConfirmPasswordInput () {
      this.confirmPassword = this.confirmPassword.slice(0, 6)
    },
    // 点击获取验证码时候校验
    getCode () {
      if (!this.canGetCode) {
        return
      }
      const phonePattern = /^1[3-9]\d{9}$/
      if (!phonePattern.test(this.phoneNum)) {
        this.notify('warning', '手机号格式错误')
        return
      }
      this.canGetCodeFlg = false
      this.hasGetCode = true
      this.getCodeIntervalId = setInterval(() => {
        this.labelForCode = '重新获取' + this.getCodeCount
        this.getCodeCount--
      }, 1000)
    },
    // 消息通知
    notify (type, msg) {
      this.$notify({ type: type, message: msg })
    },
    // 重置定时器
    resetCodeState () {
      this.getCodeCount = 60
      this.labelForCode = '获取验证码'
      this.canGetCodeFlg = true
      if (this.getCodeIntervalId) {
        clearInterval(this.getCodeIntervalId)
        this.getCodeIntervalId = null
      }
    },
    // 回到上一页
    handleGoBack () {
      this.$router.back(-1)
    },
    handleRegister () {
      if (!this.canRegister) {
        this.notify('warning', '请完善信息')
      }
      const phonePattern = /^1[3-9]\d{9}$/
      if (!phonePattern.test(this.phoneNum)) {
        this.notify('warning', '手机号格式错误')
        return
      }
      if (this.password.length < 4) {
        this.notify('warning', '密码长度不足')
        return
      }
      if (this.password !== this.confirmPassword) {
        this.notify('warning', '两次密码不一致')
        return
      }
      this.notify('success', '重置成功')
      this.handleGoBack()
    }
  },
  computed: {
    canGetCode () {
      return this.phoneNum.length > 0 && this.canGetCodeFlg
    },
    canRegister () {
      return this.phoneNum.length > 0 &&
      this.identifyingCode.length > 0 &&
       this.password.length > 0 &&
        this.confirmPassword.length > 0 && this.hasGetCode
    }
  },
  watch: {
    getCodeCount (value) {
      if (value <= 0) {
        this.resetCodeState()
      }
    }
  }
}
</script>
<style scoped lang="less">

.forgetIndex {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
::v-deep .van-nav-bar__title{
  font-size: 18px !important;
  font-weight: 500 !important;
}

::v-deep .van-nav-bar .van-icon {
  color: black;
  font-size: 20px;
  font-weight: 600;
}

::v-deep .van-field__label {
  display: flex;
  align-items: center;
  span{
    display: block;
    color: black !important;
    font-family: 'Arial', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 16px;
  }
}
.center {
  flex: 1;
  padding: 20px;
  background-color: #fafafa;
}
.phoneInp {
  ::v-deep .van-field__control {
    border-right: #e0e4e7 1px solid;
    padding-right: 10px;
  }
  .van-button{
        border-radius: 30px !important;
    }
}
::v-deep .van-cell-group {
  border: none;
  background-color:#fafafa ;
}
::v-deep .van-cell {
  border-radius: 15px !important;
  margin-bottom: 10px;
}

.btn {
    padding: 16px;
    .van-button{
        width: 100% !important;
        border-radius: 13px !important;
        height: 48px;
    }
    .register_btn {
        margin-top: 10px;
    }
}
</style>
